<template>
	<view class="mask" v-if="ModulesState">
		<view class="Modules bac_ffffff">
			<view class="Modules_header">
				<view class="display_center">
					<image :src="images" mode=""></image>
					<view class="header_price">
						<view class="header_num">
							<text>￥</text>
							<text>{{shopping.price}}</text>
						</view>
						<view class="header_choice">
							<text>库存</text>
							<text>{{setList[indexS].sum}}</text>
						</view>
					</view>
				</view>
				<u-icon @click="$emit('close')" name="close-circle" size="40rpx" color="#000"></u-icon>
			</view>
			<view class="content">
				<view class="content_title">净含量</view>
				<view class="content_list">
					<!-- <view class="content_ff">50kg</view> -->
					<template v-for="(item,index) in setList">
						<view :class="index==indexS?'content_f1':'content_ff'" @click="setBut(index,item)">{{item.title}}</view>
					</template>
				</view>
			</view>
			<view class="commodity display_between">
				<view class="">数量</view>
				<u-number-box v-model="value" min="0" :max="setList[indexS].sum" :disabledInput="true" @change="change"></u-number-box>
			</view>
			<view class="Modules_but display_center but_B29062" @click="$emit('close')">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['ModulesState', 'setModule', 'close', 'setList', 'shopping','setNumber', 'images'],
		name: "Model_Num",
		data() {
			return {
				value:1,
				indexS: 0,
				// quantity:0
			};
		},
		created() {
            
		},
        computed: {
            sets(){
                return {
                    typeID: this.setList[this.indexS]?.id || '',
                    text:  this.setList[this.indexS]?.title || '',
                    value: this.value
                }
            }
        },
		methods:{
			change(a){
				this.$nextTick(() => {
                    this.$emit('setNumber',this.sets)
                })
			},
			setBut(a,b){
				this.indexS=a
				this.$nextTick(() => {
				    this.$emit('setNumber',this.sets)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
    @import '@/libs/PublicStyle.scss';
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明遮罩层 */
		z-index: 1;
		width: 100%;
		height: 100vh;
        opacity: 1;
	}

	.Modules {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
        right: 0;
		padding: 0 30rpx;
		// width: 690rpx;
        // margin-left: 50%;
        // transform: translateX(-50%);
		min-height: 500rpx;
	}

	.Modules_header {
		display: flex;
		justify-content: space-between;

		image {
			margin-top: -20rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}

	}

	.header_price {
		margin-left: 20rpx;
	}

	.header_num>text:nth-child(2) {
		font-size: 40rpx
	}

	.header_choice {
		margin-top: 20rpx;
		font-size: 26rpx;

		>text:nth-child(1) {
			margin-right: 10rpx;
		}
	}

	.content {
		margin-top: 40rpx;

		.content_title {
			font-size: 35rpx;
			color: #000;
		}
	}

	.content_list {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;
	}

	.content_list>view {
		text-align: center;
		line-height: 70rpx;
		width: 200rpx;
		height: 70rpx;
		border-radius: 70rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.content_ff {
		background-color: #ffffff;
		border: 1px solid #666666;
	}

	.content_f1 {
		background-color: #dddddd;
		color: #fff;
		border: 1px solid #fff;
	}

	.commodity {
		margin-top: 30rpx;
		width: 100%;
	}

	.Modules_but {
		border-radius: 20rpx;
		margin: 20rpx 0 40rpx 0;
		width: 100%;
		height: 100rpx;
		color: #fff;
	}
</style>